<template>
  <el-card class="box-card">

    <el-row type="flex" justify="space-between">
      <el-button size="small" type="primary" @click="addFn">添加分类</el-button>
      <el-input v-model="keyword" placeholder="请输入内容" class="input-with-select">
        <!-- 筛选按钮 -->
        <el-button slot="append" icon="el-icon-search" @click="search" />
      </el-input>
    </el-row>
    <!-- 分割线 -->
    <div class="el-divider el-divider--horizontal" />
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column label="图片" prop="image">
        <template v-slot="{row}">
          <img :src="row.image" style="width:200px">
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        prop="desc"
        label="介绍"
      />
      <el-table-column v-slot="{row}" label="操作">
        <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
        <el-button type="danger" @click="delFn(row.id)">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-row type="flex" justify="center">
      <el-pagination
        layout="prev, pager, next"
        :page-size="pageClassify._limit"
        :total="total"
        @current-change="currentChange"
      />
    </el-row>
    <!-- 弹窗 -->
    <AddClassify ref="addForm" :show-dialog.sync="showDialog" @undataList="getClassifyList" />
  </el-card>
</template>

<script>
// 引入接口
import { getClassifyList, getClassifyListId, delClassifyList, getClassifyNumber } from '@/api/classify'
// 引入子组件
import AddClassify from './component/add-classify.vue'
export default {
  components: { AddClassify },
  data() {
    return {
      // 弹窗
      showDialog: false,
      tableData: [],
      pagClassify: {
        _limit: 2, // 每页的长度
        _start: 0// 下标
      },
      total: 0,
      currentPage: 1,
      keyword: ''
    }
  },
  computed: {
    pageClassify() {
      return {
        _limit: 2, // 每页的长度
        _start: (this.currentPage - 1) * 2
      }
    }
  },
  created() {
    // 调用封装好的获取分类列表函数
    this.getClassifyList()
  },
  methods: {
    // 筛选
    async search() {
      this.currentPage = 1
      this.getClassifyList()
      // const total = await getClassifyList()
      // console.log(total)
      // this.total = total.data
    },
    currentChange(newPage) {
      // 每页的开始，都是前一页的结束索引加1，也就是前面所有页面的长度总和
      // this.pagClassify._start = (newPage - 1) * this.pagClassify._limit
      this.currentPage = newPage
      this.getClassifyList()
      // console.log(95, this.total)
    },
    // 删除
    async delFn(id) {
      this.$confirm('是否确认删除', '删除', {
        type: 'warning'
      }).then(async() => {
        // 调用接口 删除数据
        await delClassifyList(id)
        if (this.tableData.length === 1 && this.currentPage !== 1) {
          this.currentPage--
        }
        // 刷新列表
        this.getClassifyList()
      }).catch(err => {
        console.log('取消删除', err)
      })
    },
    // 编辑弹窗
    async editFn(id) {
      this.showDialog = true
      // 获取分类数量
      const res = await getClassifyListId(id)
      this.$refs.addForm.formData = res.data
      // console.log(75, res.data.image)
      this.$nextTick(() => {
        this.$refs.addForm.$refs.upload.fileList.push({
          url: res.data.image
        })
      })
      this.$refs.addForm.$refs.upload.fileList = []
    },
    // 添加弹窗
    addFn() {
      this.showDialog = true
    },
    async getClassifyList() {
      // 获取分类列表
      const res = await getClassifyList({
        ...this.pageClassify,
        // 这里适配有或者没有搜索条件的加载
        title_contains: this.keyword || null
      })
      this.tableData = res.data
      console.log(68, this.tableData)
      // 获取分类数量
      const res1 = await getClassifyNumber({
        title_contains: this.keyword || null
      })
      this.total = res1.data
    }
  }
}
</script>

<style lang="scss" scoped>
.input-with-select{
  width: 500px;
}
</style>
